<template>
  <div id="app">


    <button @click="handleclick(item)" v-for="(item,i) in list" :key="i">{{item}}</button>

      <button @click="open">点击出现列表</button>
 
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        list:['discover','mine','friend',],
        arr:[]
      }
    },
    mounted () {
      
      
    },
    methods: {
      handleclick(item){
        if (this.$route.path==='/'+item) {
            return
        }
        this.$router.push('/'+item)
      },
      open(){
        console.log(this.$router);
        this.$router.push({name:'list'})
      
      }
    }
  }

</script>
<style scoped>
  button{
    margin: 10px;
    border: 0;
    width: 100px;
    height: 40px;
    background: linear-gradient(to right,red,green,yellow);
    cursor: pointer;
    color: white;
  }
  #app{
    background: linear-gradient(to right,gray,pink);
    opacity: .9;
  }
 
  

</style>

